<!-- 搜索框 -->
<template>
  <div class="search-style">
    <a-input-search
      v-model:value="value"
      placeholder="请输入名称或地址"
      enter-button
      size="large"
      width="200px"
      @search="onSearch"
    />
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue'

export default {
  setup() {
    const state = reactive({
      value: ''
    })

    const map = getCurrentInstance().proxy.$root.$map

    onMounted(() => {
      console.log('map', map)
    })

    function onSearch() {
      console.log(map, map.getCenter(), map.getZoom(), map.getPitch(), map.getBearing())
    }

    return {
      ...toRefs(state),
      onSearch
    }
  }
}
</script>

<style lang="scss" scoped>
.search-style {
  position: fixed;
  top: 100px;
  left: 49px;
  width: 338px;
}
</style>
